<template>
    <div class="container">
      <!-- <svg id="barcode" /> -->
        <div class="opt-area-02">
            <div class="right-con">
              <div class="input-frame" style="width: 164px">
                  <Input type="text" @on-click="selectlist(1)" placeholder="样品编号" style="width: 164px" v-model="params.sample_code"
                          icon="ios-search"/>
              </div>
              <!-- <div class="input-frame" style="width: 164px">
                <Select v-model="params.sample_status" placeholder="请选择检测状态" style="width: 164px" filterable @on-change="perChange(1)">
                  <Option value="0">未检测</Option>
                  <Option value="1">已检测</Option>
                </Select>
              </div> -->
              <div class="input-frame" style="width: 164px">
                <Select v-model="params.sample_result" placeholder="请选择检测结果" style="width: 164px" filterable @on-change="perChange(2)">
                  <Option value="0">未出结果</Option>
                  <Option value="1">阴性</Option>
                  <Option value="2">阳性</Option>
                </Select>
              </div>
              <Button type="info" size="small" @click="selectlist(1)" style="margin-top: 5px">搜索</Button>
            </div>
        </div>
        <Table :loading="countData.loading" border :columns="columns1" :data="fcDataList" size="small" ref="table">
            <template slot-scope="{ row }" slot="sample_status">
              <span v-if="row.sample_status == '0'">未送检</span>
              <span v-if="row.sample_status == '1'">已送检</span>
            </template>1yinxing
            <template slot-scope="{ row }" slot="sample_result">
              <span v-if="row.sample_result == '0'">未出结果</span>
              <span v-if="row.sample_result == '1'">阴性</span>
              <span v-if="row.sample_result == '2'">阳性</span>
            </template>1yinxing
            <template slot="action" slot-scope="{ row }">
                <Row style="margin-bottom: 5px; margin-top: 2px">
                    <Button class="table-action-btn" type="info" size="small" v-if="row.sample_status === '1'" @click="correctionResults(row)">修正结果</Button>
                    <Button class="table-action-btn" type="success" size="small" @click="showdetail(row)">查看明细</Button>
                    <Button class="table-action-btn" type="info" size="small" @click="controlReview(row)">疾控复核</Button>
                </Row>
            </template>
        </Table>
        <!-- <Row v-if="loadData == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>Loading</div>
            </Spin>
          </Col>
        </Row> -->
        <Row type="flex" justify="end" class="page_style">
          <Page :current="currentPageNo" :total="totalnum" show-sizer :page-size="currentPageSize"
                show-total @on-change="changePageNo" @on-page-size-change="pageSizeChange"/>
        </Row>
        <Modal v-model="sampleObj.modal1" title="修正结果" @on-ok="ok" @on-cancel="cancel">
            <RadioGroup v-model="sampleObj.sample_result">
              <Radio label="0">未出结果</Radio>
              <Radio label="1">阴性</Radio>
              <Radio label="2">阳性</Radio>
            </RadioGroup>
        </Modal>
        <Modal v-model="personShow" title="检测人明细" width="700" :closable="false">
          <Table border :columns="columns2" :data="data2"></Table>
        </Modal>
        <!-- <barcode :value="barcodes" id="aaa" :options="barcode_option" tag="svg" ></barcode> -->
    </div>
</template>

<script>
import { getSampleListForWJ, updateSampleStatusForWJ, getSamplePersonList } from '@/api/nucleic-acid-detection'
// import JsBarcode from 'jsbarcode'
// import VueBarcode from '@xkeshi/vue-barcode'
// import { grid_downlist } from '@/api/eventlist'
// import { getCityList } from '@/api/common'
// import { forEach } from '@/libs/tools'
export default {
  name: 'list',
  data () {
    return {
      barcode_option: {
        displayValue: true, // 是否默认显示条形码数据
        // textPosition:'top', //条形码数据显示的位置
        background: '#fff', // 条形码背景颜色
        valid: function (valid) {
          console.log(valid, '11@@@@')
        },
        width: '1px', // 单个条形码的宽度
        height: '55px',
        fontSize: '22px' // 字体大小
      },
      barcodes: 'LM208861606907720718',
      personShow: false,
      sampleObj: {
        modal1: false, // 修正结果模态框
        sample_result: '',
        sample_code: ''
      },
      loadData: false,
      countData: {
        loading: false
      },
      searchInfo: {},
      params: {
        pageNo: 1,
        pageSize: 10,
        sample_code: '',
        sample_status: '',
        sample_result: ''
      },
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      columns1: [
        { title: '序号', type: 'index', width: 60, align: 'center' },
        {
          title: '样品编号',
          key: 'sample_code',
          width: 210,
          align: 'center',
          render: (h, params) => {
            let temp = []
            if (params.row.sample_result === '2') {
              temp.push(h('Icon', { props: { type: 'ios-warning-outline', size: '25' }, style: { color: '#f00' } }))
            }
            temp.push(h('span', ' \xa0' + params.row.sample_code))
            return h('div', temp)
          }
        },
        { title: '状态', slot: 'sample_status', width: 120, align: 'center' },
        { title: '采样日期', key: 'sample_date', width: 200, align: 'center' },
        { title: '采样机构', key: 'company_name', width: 200, align: 'center' },
        { title: '监测结果', slot: 'sample_result', width: 150, align: 'center' },
        { title: '操作', align: 'center', width: 300, slot: 'action' }
      ],
      fcDataList: [],
      columns2: [
        { title: '序号', type: 'index', width: 60, align: 'center' },
        { title: '姓名', key: 'name', width: '80', align: 'center' },
        { title: '证件号码', key: 'card_no', align: 'center' },
        { title: '联系电话', key: 'mobile', align: 'center' },
        { title: '详细地址', key: 'address', align: 'center' }
      ],
      data2: [] // 送检人明细列表
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  watch: {
  },
  methods: {
    pageAction (page) {
      this.params.pageNo = page
      this.getList()
    },
    selectlist () {
      this.params.pageNo = 1
      this.getList()
    },
    getList () {
      getSampleListForWJ(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.fcDataList = res.data.data.results
          this.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '查询列表信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    changePageNo (pageNo) {
      console.log(pageNo, '页数')
      this.currentPageNo = pageNo
      this.params.pageNo = pageNo
      this.getList(this.params)
    },
    getPersonList (sample_code) { // 获取送检人列表
      let param = {
        sample_code: sample_code
      }
      getSamplePersonList(param).then(res => {
        if (res.data.errcode === 0) {
          this.data2 = res.data.data
          console.log(this.data2, '明细列表')
        } else {
          this.$Notice.error({
            title: '获取样品列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    showdetail (row) { // 查看明细
      this.getPersonList(row.sample_code)
      this.personShow = true
    },
    controlReview () { // 疾控复核
      console.log('疾控复核')
    },
    correctionResults (item) { // 弹出修正结果模态框
      this.sampleObj.sample_code = item.sample_code
      this.sampleObj.sample_result = item.sample_result
      this.sampleObj.modal1 = true
    },
    ok () { // 修改检测结果
      updateSampleStatusForWJ({ sample_code: this.sampleObj.sample_code, sample_result: this.sampleObj.sample_result }).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({
            title: '',
            desc: '更改检测结果成功'
          })
          this.sampleObj.modal1 = false
          this.getList()
        } else {
          this.$Notice.error({
            title: '更改检测结果失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.selectlist(this.params.pageNo)
    },
    cancel () {
      this.personShow = false
    }
  },
  mounted () {
    var aa = document.getElementById('aaa')
    console.log(aa, 'aaaa')
    this.getList()
    // JsBarcode('#barcode', '61606924060795', {
    //   format: 'CODE128',
    //   lineColor: '#000',
    //   background: '#EBEEF5',
    //   width: 0.5,
    //   height: 40,
    //   displayValue: false
    // })
  }
}
</script>

<style scoped>
    .page_style {
        margin: 20px 5px;
    }

    .input-frame {
        width: 120px;
        margin-right: 10px;
    }

    .house-list > .group {
        background: white;
        padding: 10px;
        margin-top: 10px;
    }

    .house-list > .group > .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
    }

    .house-list > .group > .item .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .house-list > .group > .item .title {
        font-size: 14px;
        color: #333333;
    }

    .house-list > .group > .item .address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }

    .house-list > .group > .item .detail {
        font-size: 12px;
        color: dodgerblue;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .table-action-btn {
        margin-right: 3px;
    }

    .container >>> .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .btn-action {
        margin-bottom: 10px;
    }

    .mp10 {
        margin-right: 10px;
    }
    .title-style {
      color: red;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mt20 {
      margin-top: 20px;
    }
    .ivu-table-row {
      height: 57px;
    }
  .ivu-form-item-label {
    margin-top: 8px;
  }
    .demo-spin-icon-load{
      animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
      from { transform: rotate(0deg);}
      50%  { transform: rotate(180deg);}
      to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
      height: 100px;
      position: relative;
      /*border: 1px solid #eee;*/
    }
</style>
